<template>
  <div class="overallTrend clearfix" v-loading="loading">
    <div class="logoBg"><img src="~@/assets/images/common/fiveG.png" /></div>
    <div class="heading">
      收入分析：<span class="redTitle"
        >核心平台收入整体趋势——环比{{ topicDesc }}</span
      >
    </div>
    <div class="content">
      <div class="desc">
        <div class="growthRate">
          <div class="weightFont">
            <span class="lingxing"></span>{{ data }}，<span class="redFont">{{
              incomeResult
            }}</span
            ><span class="normalFont">{{ incomeResult1 }}</span>
          </div>
          <div class="weightFont">
            <span class="lingxing"></span>{{ data }}，<span class="redFont">{{
              newIncream
            }}</span
            ><span class="normalFont">{{ lastContent }}</span>
          </div>
        </div>
      </div>
      <div class="echartBox">
        <div class="rightEchart">
          <div class="contentTitle">{{ mainDataTopic }}</div>
          <PrincipalNumber :principal="principal"></PrincipalNumber>
        </div>
      </div>

      <div class="tableBox">
        <el-table
          border
          stripe
          style="width: 100%"
          class="tableTh28"
          ref="table"
          :data="tableData"
          :span-method="arraySpanMethod"
        >
          <el-table-column
            label=""
            prop="className"
            min-width="70"
          ></el-table-column>
          <el-table-column
            v-for="(item, index) in colList"
            :label="item"
            :prop="'totalData' + index"
            :key="index"
            min-width="55"
          >
            <template slot-scope="scope">
              <span
                v-if="scope.row['totalData' + index] > 0"
                style="color: #5585bf"
                >{{ scope.row["totalData" + index] }}</span
              >
              <span v-else style="color: #c00000">{{
                scope.row["totalData" + index]
              }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import PrincipalNumber from "./charts/page48Chart.vue";

import { $budgetAPI } from "@/api";
export default {
  components: {
    PrincipalNumber,
  },
  props: {
    form: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      loading: false,
      topicDesc: "",
      incomeResultDesc: "",
      incomeResult1: "",
      lastContent: "",
      incomeResult: "",
      totalIncome: "",
      newIncream: "",
      decreamNumber: "",
      principal: {},
      colList: [],
      tableData: [],
      spanArr: [],
      data: "",
      mainDataTopic: "",
    };
  },
  created(){
    
  },
  methods: {
    getData() {
      this.loading = true;
      $budgetAPI.getAllData(
        { token: this.form.token, areaId: this.form.areaId, accMonth: this.form.month },
        (res) => {
          if (res && res.code == 0) {
            this.tableData = [];
            this.incomeResult = res.content.incomeResult;
            this.topicDesc = res.content.topicDesc;
            this.totalIncome = res.content.totalIncome;
            this.mainDataTopic = res.content.mainDataTopic;
            if (res.content.incomeResultDesc) {
              this.incomeResult =
                res.content.incomeResultDesc.split(",")[0] + ",";
              this.incomeResult1 = res.content.incomeResultDesc.split(",")[1];
            }
            let newIncreaseResult = res.content.newIncreaseResult;
            if (newIncreaseResult) {
              this.newIncream = newIncreaseResult.split(",")[0] + ",";
              this.lastContent =
                newIncreaseResult.split(",")[1] +
                "," +
                newIncreaseResult.split(",")[2];
            }
            let obj = {
              xAxis: [],
              y0Axis: [],
              yAxis: [],
              y1Axis: [],
              y2Axis: [],
            };
            res.content.mainData.map((item, index) => {
              obj.xAxis[index] = item.accMonth;
              obj.y0Axis[index] = item.socreDoubleData;
              obj.yAxis[index] = item.socreData;
              obj.y1Axis[index] = item.increseData;
              obj.y2Axis[index] = item.totalData;
            });
            this.principal = obj;
            this.colList = res.content.timeArea;
            let length = res.content.timeArea.length;
            this.data =
              res.content.timeArea[length - 1].substring(0, 4) +
              "年" +
              res.content.timeArea[length - 1].substring(5, 6) +
              "月";
            let date0 = {
              className: "整体收入数(万元)",
            };
            let date1 = {
              className: "整体收入环比(万元)",
            };
            let date2 = {
              className: "季度平均(万元)",
            };
            let arr0 = [];
            let arr1 = [];
            let arr2 = [];
            res.content.mainData.map((item, index) => {
              arr0.push(item.totalData);
            });
            res.content.bottomData.map((item, index) => {
              item.totalData.map((ele, ind) => {
                arr1.push(ele);
                arr2.push(item.quarterlyAverage);
              });
            });
            for (let i = 0; i < arr0.length; i++) {
              date0["totalData" + i] = arr0[i];
            }
            for (let i = 0; i < arr1.length; i++) {
              date1["totalData" + i] = arr1[i].totalData;
              date2["totalData" + i] = arr2[i];
            }
            this.tableData.push(date0);
            this.tableData.push(date1);
            this.tableData.push(date2);
          } else {
            this.alertError(res);
          }
          this.loading = false;
          this.$nextTick(() => {
            this.$refs.table.doLayout();
          })
        },
        (err) => { this.loading = false; }
      );
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex == 2 && columnIndex > 0) {
        let position = 1;
        for (let i = 0; i < this.colList.length; i++) {
          if (row["totalData" + (i + 1)] == row["totalData" + i]) {
            position += 1;
          } else {
            break;
          }
        }
        if ((columnIndex + 1) % 3 == 0) {
          return {
            rowspan: 1,
            colspan: position,
          };
        } else {
          return {
            rowspan: 1,
            colspan: 0,
          };
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.overallTrend {
  padding: 20px;
  border: 1px solid #dee5f3;
  border-radius: 5px;
  margin-top: 20px;
  position: relative;

  .overallTrend.clearfix:after,
  .overallTrend.clearfix:before {
    content: "";
    display: table;
  }

  .overallTrend.clearfix:after {
    clear: both;
  }

  .overallTrend.clearfix {
    *zoom: 1;
  }

  .logoBg {
    position: absolute;
    right: 20px;
    top: 20px;
  }

  .heading {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    padding-bottom: 40px;

    .redTitle {
      color: #c00000;
    }
  }

  .content {
    .desc {
      margin-bottom: 20px;
      .weightFont {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 10px;

        .redFont {
          color: #c00000;
        }

        .normalFont {
          font-weight: normal;
          font-size: 16px;
        }

        .lingxing {
          width: 10px;
          height: 10px;
          background-color: #000000;
          transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          /* Internet Explorer */
          -moz-transform: rotate(45deg);
          /* Firefox */
          -webkit-transform: rotate(45deg);
          /* Safari 和 Chrome */
          -o-transform: rotate(45deg);
          /* Opera */
          margin-right: 7px;
          display: inline-block;
        }
      }

      .redTitle {
        color: #c00000;
        font-size: 18px;
        font-weight: 700;
        margin-top: 10px;
      }

      .normalFont {
        font-size: 16px;
      }

      .normalRedFont {
        font-size: 16px;
        color: #c00000;
      }

      .marg {
        margin-top: 20px;
      }

      .budget {
        margin-top: 20px;
      }
    }

    .echartBox {
      margin-bottom: 10px;
      .rightEchart {
        position: relative;
        display: inline-block;
        width: 100%;
        border: 1px solid #e5e5e5;
        border-radius: 10px;
        padding: 20px;
        height: 300px;
        &:before {
          content: "";
          position: absolute;
          left: 21%;
          top: -2px;
          width: 56%;
          height: 2px;
          background-color: #fff;
        }

        .contentTitle {
          position: absolute;
          width: 56%;
          left: 50%;
          top: -14px;
          transform: translateX(-50%);
          font-size: 18px;
          font-weight: 700;
          text-align: center;
        }
      }
    }
    .tableBox {
      border-top: 1px solid #9abcf1;
      border-left: 1px solid #bfbfbf;
      border-right: 1px solid #bfbfbf;
      border-bottom: 1px solid #bfbfbf;
      /deep/ .cell {
        padding: 0 !important;
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
        line-height: normal !important;
      }
      /deep/ .tableTh28 .el-table__header {
        .first-title.is-leaf {
          position: relative;
          border-right: 1px solid #d7e5fb !important;
          .cell {
            color: #d7e5fb;
          }
        }

        .second-title.is-leaf {
          overflow: visible;

          .cell {
            transform: translateX(-60%);
          }
        }
      }

      /deep/ .el-table tr:last-child td {
        color: #333;
        text-align: center;
        border-bottom: 1px solid transparent !important;
        border-right: 1px solid #bfbfbf !important;
      }
      /deep/ .el-table tbody td {
        background: rgb(255, 255, 204);
      }
    }
  }
}
</style>
